<template>
  <el-dialog
    :modelValue="modelValue"
    title="快捷入口新增"
    width="50%"
    align-center
    @close="handleClose"
    draggable
    destroy-on-close
  >
    <div v-loading="loading">
      <el-cascader-panel
        v-model="menu_ids"
        ref="menuRef"
        :options="menu_options"
        :props="cascaderProps"
        class="cascaderPanel"
      />
    </div>
    <template #footer>
      <!-- <div class="dialog-button"> -->
      <el-button @click="handleClose(true)">取消</el-button>
      <el-button type="primary" @click="handleSave" :loading="loading">
        保存
      </el-button>
      <!-- </div> -->
    </template>
  </el-dialog>
</template>
<script setup>
import { ElMessage } from "element-plus";
import usePermissionStore from "@/store/modules/permission";
import { addQuickEntry } from "@/api/system/user.js";
// 声明接收参数
const props = defineProps({
  modelValue: { type: Boolean, default: false },
  ids: { type: Array, default: () => [] },
});

watch(
  () => props.ids,
  (val) => {
    menu_ids.value = val;
  }
);
const menu_options = computed(() => {
  return permissionStore?.menuOptions || [];
});
const permissionStore = usePermissionStore();
const emit = defineEmits(["update:modelValue", "close", "refresh"]);
const loading = ref(false);
const menu_ids = ref([]);
const cascaderProps = reactive({
  multiple: true,
  label: "name",
  value: "id",
  children: "sub",
});
const menuRef = ref();
const handleSave = async () => {
  let data = menu_ids.value.map((subArray) => subArray[subArray.length - 1]);
  if (data.length === 0) return ElMessage.error("请选择数据！");
  try {
    loading.value = true;
    const { code, message } = await addQuickEntry({ menu_id: data });
    if (code !== 200) {
      ElMessage.warning(message);
      return;
    }
    ElMessage.success("保存成功!");
    handleClose(true);
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
const handleClose = async (refresh) => {
  menu_ids.value = [];
  emit("update:modelValue", false);
  emit("close");
  if (refresh) emit("refresh");
};
</script>
<style lang="scss" scoped>
.cascaderPanel {
  overflow: auto;
  height: 540px;
  &:deep(.el-scrollbar__wrap) {
    height: 100% !important;
  }
}
</style>
